<template>
    <div v-for="item in cartdata">
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                <!-- 图片 -->
                <template #thumb>
                    <van-checkbox v-model="item.checked"></van-checkbox>
                    <img :src="item.goods.goods_small_logo" alt="" style="width: 70px;">
                </template>
                <!-- 步进器 -->
                <template #num>
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" style="height: 100%;"
                    @click="del(item.id)" />
            </template>
        </van-swipe-cell>


    </div>
    <van-submit-bar :price="priceall" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>

    </van-submit-bar>
</template>

<script setup>
import { useCounterStore } from '@/stores/cart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
import { computed, ref } from 'vue';
let cartdata = ref([]);

let cart = () => {
    cartdata.value = store.piniacart;
}
cart()

let del = (id) => {
    store.piniacart = store.piniacart.filter(item => item.id != id)
    cart()
}

let priceall = computed(() => {
    let priceall = ref(0);
    let cartok = cartdata.value.filter(item => item.checked);
    cartok.forEach(item => {
        priceall.value = item.number * item.goods.goods_price
       
    })
    return priceall.value * 100
})
</script>

<style lang="scss" scoped></style>